<template>
  <div class="field-tree-container">
    <div class="field-tree">
      <el-input
        v-model="filterText"
        :placeholder="placeholder"
        size="small"
        prefix-icon="el-icon-search"
        @input="filterTree"/>
      <el-tree
        ref="tree"
        :data="fieldList"
        :props="defaultProps"
        :filter-node-method="filterNode"
        class="filter-tree filter-scroll"
        default-expand-all>
        <div slot-scope="{ node, data }" :class="{'select':selectItem && selectItem.name === node.label, 'is-leaf': node.isLeaf}" class="custom-tree-node" @mouseenter="handelHover(node, data)">
          <div :title="node.label" class="tree-main ellipsisOne" @click="handelField(data, node)">{{ node.label }}</div>
          <div v-if="isField" :class="getFieldType(data).className" class="type-tag">{{ getFieldType(data).text }}</div>
        </div>
      </el-tree>
    </div>
    <div v-if="!isField" class="summary-container filter-scroll">
      <span v-if="selectItem && selectItem.summary" class="textarea-content" v-html="selectItem.summary"/>
    </div>
  </div>
</template>

<script>
import { isNumberType } from '@/utils/formMakeUtils.js';
export default {
  props: {
    fieldList: {
      type: Array,
      default: () => ([])
    },
    isField: { // 是否是字段
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '搜索字段'
    }
  },
  data() {
    return {
      filterText: '',
      selectItem: null,
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  },
  created() {
    if (!this.isField) this.selectItem = this.fieldList[0].children[0];
  },
  methods: {
    handelHover(node, data) {
      if (this.isField || !node.isLeaf) return;
      this.selectItem = data;
    },
    filterTree(val) {
      this.$refs.tree.filter(val);
    },
    filterNode(value, data) {
      if (!value) return true;
      value = value.toUpperCase();
      return data.name.indexOf(value) !== -1;
    },
    handelField(data, node) {
      if (node.isLeaf) {
        this.$emit('selectField', data);
      }
    },
    getFieldType(field) {
      if (isNumberType(field)) {
        return {
          className: 'type-number',
          text: '数字'
        };
      } else {
        const typeMap = {
          'date': {
            className: 'type-date',
            text: '时间戳'
          },
          'switch': {
            className: 'type-date',
            text: '布尔值'
          }
        };
        return typeMap[field.type] || {
          className: 'type-text',
          text: '文本'
        };
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.field-tree {
  border: 1px solid #ddd;
  flex-shrink: 0;
  width: 220px;
  &::v-deep {
    .el-input {
      border-bottom: 1px solid #ddd;
    }
    .el-input__inner {
      background-color: transparent;
      border-color: transparent;
    }
    .el-tree-node__content {
      padding-left: 0 !important;
      background-color: #fff !important;
    }
    .el-tree-node__expand-icon {
      padding: 6px 4px;
    }
    .el-tree-node__expand-icon.is-leaf {
      display: none;
    }
  }
  .filter-tree {
    height: 210px;
  }
}
.filter-scroll {
  @include scrollBar($x: hidden, $y: auto);
}
.textarea-content {
  white-space: pre-line;
  line-height: 1.3;
  padding-top: 6px;
  word-break: break-all;
}
.custom-tree-node {
  display: flex;
  align-items: center;
  width: 100%;
  padding-right: 5px;
  &.is-leaf {
    padding-left: 22px;
  }
  &.select {
    background: rgba(36,138,249,.1);
  }
  .tree-main {
    font-size: 13px;
    flex: 1;
  }
  .type-tag {
    padding: 0 8px;
    height: 18px;
    line-height: 18px;
    border-radius: 10px;
    font-size: 12px;
  }
  .type-date {
    color: #8E24F9;
    background: rgba(142,36,249,.15);
  }
  .type-number {
    color: #F4B700;
    background: rgba(244,183,0,.15);
  }
  .type-text {
    color: #248AF9;
    background: rgba(36,138,249,.1);
  }
  .type-post {
    color: #8E24F9;
    background: rgba(142,36,249,.15);
  }
}
.field-tree-container {
  display: flex;
}
.summary-container {
  border: 1px solid #ddd;
  margin-left: 12px;
  font-size: 14px;
  padding: 10px;
  height: 245px;
  color: #5E6D82;
  &::v-deep {
    .fun {
      color: #708;
    }
  }
}
</style>
